﻿@namespace BlazorDemo.Pages.CaseViews
@inject ICountryNamesProvider CountryNamesService
@inherits DemoWithResizableComponent
@using System.Linq

<div class="demo-description">
    <h2><DemoNavLink Link="TagBox#FilterModes" />Filter Modes</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.FilteringMode">FilteringMode</a> property to specify whether and how the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2">TagBox</a> filters list items when users type in the edit box.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">Contains</a> (Default) - The TagBox filters list items that contain the search string and highlights matches.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">StartsWith</a> - The TagBox filters list items that begin with the search string and highlights matches.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">None</a> - The TagBox does not filter list items.</li>
    </ul>
    <p>
        In this demo, the filter mode is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFilteringMode">DataGridFilteringMode.StartsWith</a>.
        To change the filter mode or disable filtering, use the <b>Filtering Mode</b> drop-down list.
    </p>
</div>

<div class="option-container editors-options">
    <span>Filtering Mode: </span>
    <DxComboBox Data="@(Enum.GetNames(typeof(DataGridFilteringMode)))"
                Value="@(FilteringMode.ToString())"
                ValueChanged="@((string selectedItem) => { FilteringMode = Enum.Parse<DataGridFilteringMode>(selectedItem); })">
    </DxComboBox>
</div>

@if (Data != null) {
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Type a search string" />
    </div>
    <div class="card-body mw-480">
        <DxTagBox Id="TagBox1"
                  Data="@Data"
                  FilteringMode="@FilteringMode"
                  @bind-Values="@Values"
                  TextFieldName="@nameof(Country.CountryName)"
                  SizeMode="SizeMode"></DxTagBox>
    </div>
</div>

    <div class="code-snippet card demo-card-wide">
        <CodeSnippetHeader DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2#filter-data"/>
        <div class="card-footer text-muted">
            <CodeSnippet_Editor_TagBox_Filtering></CodeSnippet_Editor_TagBox_Filtering>
        </div>
    </div>
}

@code {
    IEnumerable<Country> Data { get; set; }
    IEnumerable<Country> Values { get; set; }
    DataGridFilteringMode FilteringMode { get; set; } = DataGridFilteringMode.StartsWith;

    protected override async Task OnInitializedAsync() {
        Data = await CountryNamesService.LoadAsync();
        Values = Data.Where(x => x.CountryName == "United Kingdom" || x.CountryName == "United States");
    }
}
